<template>
	<view class="content">
		<view class="header">
			<image src="../../static/shilu-login/logo.png"></image>
		</view>

		<view class="list">
			<view class="list-call">
				<image class="img" src="/static/shilu-login/1.png"></image>
				<input class="sl-input" v-model="phone" type="number" maxlength="11" placeholder="输入手机号" />
			</view>
			<view class="list-call">
				<image class="img" src="/static/shilu-login/2.png"></image>
				<input class="sl-input" v-model="password" type="text" maxlength="32" :placeholder=pwdAndMessage
					:password=booleanPwd />
				<button v-show="senMessage" @click="handleMessage" :disabled="isSending" class="button-Message">
					{{ isSending ? countdown + '秒后重试' : '发送验证码' }}
				</button>
			</view>
			<u--text style="margin-top: 15rpx;" align="right" type="primary" :text="textMessage"
				@click="handleVerificationCode"></u--text>
		</view>

		<view class="button-login" hover-class="button-hover" @tap="bindLogin()">
			<text>登录</text>
		</view>
		<view class="agreenment">
			<navigator url="forget" open-type="navigate">忘记密码</navigator>
			<text>|</text>
			<navigator url="reg" open-type="navigate">注册账户</navigator>
			<text>|</text>
			<text class="third-login" @tap="showThirdPartyPopup">第三方认证</text>
		</view>
		<u-popup :customStyle="{width:'550rpx',height:'300rpx'}" :round="10" :show="show" mode="center" @close="close"
			@open="open">
			<view style="display: flex;flex-direction: row;">
				<image style="margin-top: 75rpx;" class="img" src="/static/shilu-login/2.png"></image>
				<input style="margin-top: 75rpx;" class="sl-input" v-model="UUIDCodeInput" type="text" maxlength="32"
					placeholder="请输入验证码" />
				<u--image style="margin-top: 65rpx;margin-right: 20rpx;" :showLoading="true" :src=UUIDCodeImage width="200rpx"
					radius=5 height="75rpx" @click="handleMessageAgain"></u--image>
			</view>
			<button style="margin-top: 20rpx;" @click="handleLoginUUID" class="button-Message">确定</button>
		</u-popup>

		<!-- 第三方登录底部弹窗 -->
		<u-popup :show="showThirdParty" mode="bottom" :customStyle="{borderRadius: '20rpx 20rpx 0 0'}"
			@close="closeThirdPartyPopup">
			<view class="popup-header">选择第三方登录</view>
			<view class="popup-icons">
				<view class="icon-item" @click="thirdPartyLogin('微信')">
					<image src="/static/微信.png" class="icon" />
					<text>微信</text>
				</view>
				<view class="icon-item" @click="thirdPartyLogin('QQ邮箱')">
					<image src="/static/QQ邮箱.png" class="icon" />
					<text>QQ邮箱</text>
				</view>
			</view>
		</u-popup>

		<!-- QQ邮箱登录弹窗 -->
		<u-popup :show="showQQEmailPopup" mode="bottom" :customStyle="{borderRadius: '20rpx 20rpx 0 0'}"
			@close="closeQQEmailPopup" @click="closeOnClickOutside">
			<view class="popup-container" @click.stop>
				<view class="popup-header">QQ邮箱登录</view>
				<view class="input-item">
					<label class="input-label">QQ邮箱</label>
					<input v-model="email" placeholder="请输入邮箱地址" type="email" class="input-field" />
				</view>
				<view class="input-item">
					<label class="input-label">验证码</label>
					<u-code-input v-model="emailCode" mode="line" class="code-input"></u-code-input>
					<u-button type="primary" size="large " text="获取验证码" color=#FFA500 @click="GetVCode"></u-button>
				</view>
				<button @click="submitQQEmailLogin" class="login-button">登录</button>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		phoneLogin,
		codeMessage,
		UUIDCode,
		UUIDLogin,
		sendEmail,
		emailLogin
	} from "@/api/user.js"
	import colorGradient from "../../uni_modules/uview-ui/libs/function/colorGradient";
	export default {
		data() {
			return {
				UUIDCodeImage: '',
				UUIDCodeInput: '',
				show: false,
				showThirdParty: false,
				showQQEmailPopup: false,
				email: '',
				emailCode: '',
				textMessage: "手机验证码登录",
				countdown: 60,
				disableMessage: false,
				isSending: false,
				senMessage: false,
				pwdAndMessage: "请输入密码",
				booleanPwd: true,
				phone: '',
				password: '',
				pwdOrMsg: 0, //0是密码，1是短信登录
			};
		},
		methods: {
			 checkEmail(email) {
			  var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
			  return reg.test(email);
			},
			//获取验证码
			GetVCode() {
				if(this.checkEmail(this.email)){
					
					var data={email:this.email}
					sendEmail(data).then(res=>{
						if(res.message=="success"){
							uni.showToast({
								type: 'success',
								icon: 'none',
								title: '发送成功'
							});
						}
					})
				}else{
					uni.showToast({
						type: 'error',
						icon: 'none',
						title: '请输入正确的邮箱'
					});
				}
				
			},
			// 显示第三方登录弹窗
			showThirdPartyPopup() {
				this.showThirdParty = true;
			},
			// 选择第三方平台登录
			thirdPartyLogin(platform) {
				if (platform === 'QQ邮箱') {
					this.showQQEmailPopup = true;
				} else {


					alert(`${platform} 登录`);
				}
			},
			// 点击空白区域关闭弹窗
			closeOnClickOutside() {
				this.closeQQEmailPopup();
			},
			// 关闭QQ邮箱登录弹窗
			closeQQEmailPopup() {
				this.showQQEmailPopup = false;
				this.email = '';
				this.emailCode = '';
			},
			// 提交QQ邮箱登录
			submitQQEmailLogin() {
				if(this.checkEmail(this.email)){
					if(this.emailCode<=5){
						uni.showToast({
							type: 'error',
							icon: 'none',
							title: '请输入完整验证码'
						});
					}
					var data={email:this.email,emailCode:this.emailCode}
					emailLogin(data).then(res=>{
						if(res.message=="false"){
							uni.showToast({
								type: 'error',
								icon: 'none',
								title: '当前邮箱不存在'
							});
						}else if(res.message=="false1"){
							uni.showToast({
								type: 'error',
								icon: 'none',
								title: '验证码过期'
							});
						}else if(res.message=="false2"){
							uni.showToast({
								type: 'error',
								icon: 'none',
								title: '验证码不正确'
							});
						}else{
							uni.showToast({
								type: 'success',
								icon: 'none',
								title: '登录成功'
							});
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					})
				}else{
					uni.showToast({
						type: 'error',
						icon: 'none',
						title: '请输入正确的邮箱'
					});
				}
				var data={email:this.email}
				emailLogin()

			},
			handleLoginUUID() {
				if (this.UUIDCodeInput < 1) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none',
					});
					return;
				}
				var data = {
					phone: this.phone,
					password: this.password,
					uuid: this.$cookies.get("uuid"),
					code: this.UUIDCodeInput
				}
				UUIDLogin(data).then(res => {
					if (res.message == "false1") {
						uni.showToast({
							type: 'error',
							icon: 'none',
							title: '验证码过期'
						});

						UUIDCode(null).then(res => {
							if (res.message == "ok") {
								console.log(res.data.uuid)
								this.$cookies.set("uuid", res.data.uuid)
								this.UUIDCodeImage = `data:image/jpeg;base64,${res.data.code}`;
							}
						})
					} else if (res.message == "false2") {
						uni.showToast({
							type: 'error',
							icon: 'none',
							title: '验证码错误'
						});

						UUIDCode(null).then(res => {
							if (res.message == "ok") {
								console.log(res.data.uuid)

								this.$cookies.set("uuid", res.data.uuid)
								this.UUIDCodeImage = `data:image/jpeg;base64,${res.data.code}`;
							}
						})
					} else if (res.message == "false3") {
						uni.showToast({
							type: 'error',
							icon: 'none',
							title: '当前账号不存在，请先注册'
						});

						UUIDCode(null).then(res => {
							if (res.message == "ok") {
								console.log(res.data.uuid)
								this.$cookies.set("uuid", res.data.uuid)
								this.UUIDCodeImage = `data:image/jpeg;base64,${res.data.code}`;
							}
						})
					} else if (res.message == "false4") {
						uni.showToast({
							type: 'error',
							icon: 'none',
							title: '当前账号没有设置密码，请使用手机验证码登录'
						});
					} else if (res.message == "false5") {
						uni.showToast({
							type: 'error',
							icon: 'none',
							title: '密码错误'
						});
						this.show = false
					} else {
						uni.showToast({
							type: 'success',
							icon: 'none',
							title: '登录成功',
						});
						this.$cookies.set("token", res.data[1])
						this.$cookies.set("id", res.data[0])
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				})
			},

			bindLogin() {
				if (!this.isValidPhone(this.phone)) {
					uni.showToast({
						title: '请输入有效的手机号码',
						icon: 'none',
					});
					return;
				}
				if (this.pwdOrMsg == 0) {
					if (this.password.length < 1) {
						uni.showToast({
							icon: 'none',
							title: '请输入密码'
						});
						return;
					}

				} else {
					if (this.password.length < 1) {
						uni.showToast({
							icon: 'none',
							title: '请输入验证码'
						});
						return;
					}
				}
				if (this.pwdOrMsg == 0) {
					this.show = true
					return
				}

				var data = {
					phone: this.phone,
					password: this.password,
				}
				phoneLogin(data).then(res => {
					if (res.data == "false") {
						uni.showToast({
							type: 'error',
							icon: 'none',
							title: '验证码错误'
						});

					} else if (res.data == "false1") {
						uni.showToast({
							type: 'error',
							icon: 'none',
							title: '验证码已过期'
						});
					} else {
						this.$cookies.set("token", res.data[1])
						this.$cookies.set("phone", res.data[0])
						uni.showToast({
							type: 'success',
							icon: 'none',
							title: '登录成功'
						});
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				}).catch(err => {

				})
				this.countdown = 60
				this.stopCountdown();
			},

			handleMessageAgain() {
				UUIDCode(null).then(res => {
					if (res.message == "ok") {
						console.log(res.data.uuid)
						this.$cookies.set("uuid", res.data.uuid)
						this.UUIDCodeImage = `data:image/jpeg;base64,${res.data.code}`;
					}
				})
			},

			handleVerificationCode() {
				this.password = null
				if (this.textMessage == "手机验证码登录") {
					this.booleanPwd = false
					this.pwdAndMessage = "请输入验证码"
					this.senMessage = true
					this.textMessage = "账号密码登录"
					this.pwdOrMsg = 1
				} else {
					this.booleanPwd = true
					this.pwdAndMessage = "请输入密码"
					this.senMessage = false
					this.textMessage = "手机验证码登录"
					this.isSending = false
					this.senMessage = false
					this.pwdOrMsg = 0
					this.countdown = 60;
					this.stopCountdown()
				}

			},

			handleMessage() {
				if (!this.isValidPhone(this.phone)) {
					this.stopCountdown()
					uni.showToast({
						title: '请输入有效的手机号码',
						icon: 'none',
					});
					return;
				}

				this.isSending = true;
				this.disableMessage = true;
				this.countdown = 60; // 重置倒计时
				var data = {
					number: this.phone
				}
				codeMessage(data).then(res => {
					if (res.message == "success") {
						uni.showToast({
							type: 'success',
							title: '发送成功',
							icon: 'none',
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
						});
					}
				}).catch(err => {

				})
				this.startCountdown();
			},

			// // 验证手机号码是否合法
			// isValidPhone(phone) {
			// 	const phoneRegEx = /^1[3-9]\d{9}$/;
			// 	return phoneRegEx.test(phone);
			// },
			// 验证手机号码是否合法
			isValidPhone(phone) {
				const phoneRegEx = /^1[3-9]\d{9}$/;
				return phoneRegEx.test(phone);
			},

			// 启动倒计时
			startCountdown() {
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
					} else {
						this.stopCountdown();
					}
				}, 1000);
			},

			// 停止倒计时
			stopCountdown() {
				clearInterval(this.timer);
				this.timer = null;
				this.isSending = false;
			},
			open() {
				UUIDCode(null).then(res => {
					if (res.message == "ok") {
						console.log(res.data.uuid)
						this.$cookies.set("uuid", res.data.uuid)
						this.UUIDCodeImage = `data:image/jpeg;base64,${res.data.code}`;
					}
				})
			},
			close() {
				this.show = false
				this.UUIDCodeInput = ''
				// console.log('close');
			}
		},
		mounted() {

		}
	}
</script>

<style>
	.popup-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
		padding: 20rpx;
	}

	.popup-header {
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		padding: 20rpx 0;
		color: #333;
	}

	.input-item {
		margin: 20rpx 0;
		width: 80%;
	}

	.input-field {
		width: 84%;
		margin-top: 20rpx;
		padding: 16rpx 20rpx;
		border-radius: 8rpx;
		border: 1px solid #ccc;
		font-size: 16px;
		color: #333;
		background-color: #fafafa;
	}

	.input-field:focus {
		border-color: #007aff;
		outline: none;
	}

	.code-input {
		width: 84%;
		padding: 20rpx 20rpx;
		font-size: 14px;
		color: #333;
	}


	.login-button {
		width: 80%;
		padding: 12rpx;
		background-color: #007aff;
		color: white;
		font-size: 16px;
		border-radius: 8rpx;
		margin-top: 20rpx;
		text-align: center;
		font-weight: bold;
		border: none;
	}

	.login-button:hover {
		background-color: #005bb5;
	}

	/* 关闭按钮 */
	.close-button {
		width: 100%;
		padding: 12rpx;
		background-color: #f1f1f1;
		color: #333;
		font-size: 16px;
		border-radius: 8rpx;
		margin-top: 10rpx;
		text-align: center;
		border: none;
	}

	.close-button:hover {
		background-color: #e0e0e0;
	}

	.content {
		display: flex;
		margin-top: 60rpx;
		flex-direction: column;
		justify-content: center;
	}

	.header {
		width: 161rpx;
		height: 161rpx;
		background: rgba(63, 205, 235, 1);
		box-shadow: 0rpx 12rpx 13rpx 0rpx rgba(63, 205, 235, 0.47);
		border-radius: 50%;
		margin-top: 30rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.header image {
		width: 161rpx;
		height: 161rpx;
		border-radius: 50%;
	}

	.list {
		display: flex;
		flex-direction: column;
		padding-top: 50rpx;
		padding-left: 70rpx;
		padding-right: 70rpx;
	}

	.list-call {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		color: #333333;
		border-bottom: 0.5px solid #e2e2e2;
	}

	.list-call .img {
		width: 40rpx;
		height: 40rpx;
	}

	.img {
		width: 40rpx;
		height: 40rpx;
	}

	.sl-input {
		flex: 1;
		text-align: left;
		font-size: 32rpx;
		margin-left: 16rpx;
	}

	.list-call .sl-input {
		flex: 1;
		text-align: left;
		font-size: 32rpx;
		margin-left: 16rpx;
	}

	.button-Message {
		color: #FFFFFF;
		font-size: 28rpx;
		width: 200rpx;
		height: 90rpx;
		background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 20rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;

	}

	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}

	.button-hover {
		background: linear-gradient(-90deg, rgba(63, 205, 235, 0.8), rgba(188, 226, 158, 0.8));
	}

	.agreenment {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		margin-top: 80rpx;
		color: #FFA800;
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
	}

	.agreenment text {
		font-size: 24rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
	}

	.popup-header {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.popup-icons {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 30rpx 0;
	}

	.icon-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		cursor: pointer;
	}

	.icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.close-button {
		margin-top: 30rpx;
		width: 500rpx;
		height: 60rpx;
		background-color: #ddd;
		color: #333;
		text-align: center;
		line-height: 60rpx;
		border-radius: 10rpx;
		cursor: pointer;
	}
</style>